<template>
  <div class="video" v-loading="loading">
    <template v-if="list.length > 0" v-for="item in list" :key="item">
      <div class="video-item" @click="handleClick(item)">
        <div class="video-item-name">
          <span>20913运巷运输通道</span>
          <el-tag plain round>在&nbsp;&nbsp;线</el-tag>
        </div>
        <div class="video-item-img">
          <el-image loading="lazy"
            class="video-item-img-item"
            :src="`${BASE_API}video/getPlaySnap?cameraUuid=${item.cameraUuid}&customerNo=${item.customerNo}&cameraType=${item.cameraType}`">
            <template #error>
              <el-icon size="32">
                <VideoPlay />
              </el-icon>
            </template>
          </el-image>
        </div>
        <el-button-group class="video-item-tools">
          <el-button>打电话</el-button>
          <el-button>AI分析</el-button>
        </el-button-group>
      </div>
    </template>
    <b-empty v-else></b-empty>
  </div>
</template>
<script setup lang="ts">
const BASE_API = import.meta.env.VITE_APP_BASE_URL
import { getCameraList } from '@/api/bvideo'
import { ref, onMounted, onUnmounted } from 'vue'
import bEmpty from '@/components/b-empty.vue'
import { VideoPlay } from '@element-plus/icons-vue'
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  }
})


const loading = ref(false)
const list = ref([])
const interval = ref(null)
onMounted(async () => {
  getCameraListFun()
  // 每分钟更新一次
  interval.value = setInterval(async () => {
    await getCameraListFun()
  }, 60000)
})

const getCameraListFun = async () => {
  loading.value = true
  const { data } = await getCameraList({ ...props.params, pageSize: -1 })
  list.value = data.records
  loading.value = false
}

onUnmounted(() => {
  clearInterval(interval.value)
})
</script>
<style scoped lang="scss">
.video {
  width: 100%;
  min-width: 616px;
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--scale));
  .video-item {
    width: 300px;
    display: flex;
    flex-direction: column;
    background: var(--bg-color-page);
    padding: 8px;
    gap: 8px;
    cursor: pointer;
    direction: ltr;
    .video-item-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      font-size: 14px;
    }
    .video-item-img {
      width: 100%;
      font-size: 0;
      .video-item-img-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 135px;
        object-fit: cover;
        background-color: #000;
      }
    }
    .video-item-tools {
      .el-button {
        background-color: rgba(0, 255, 167, 0.68);
        color: var(--text-color);
      }
    }
  }
}
</style>
